<template>
    <div>
       <p>热门搜索</p>
       <div class="love">
            <button @click="flower(item.type)" v-for="(item,i) in TypeList" :key=i>
                {{item.name}}
                </button>
           <!--  <button>巧克力</button>
            <button>水果</button>
            <button>蛋糕</button>
            <button>玫瑰花</button> -->
           <!--  <button>公仔花束</button> -->
       </div>
    </div>
</template>

<script> 
import {getType} from '../api/classify'
    export default {
        data(){
            return{
                /*  tabPosition: 'left', */
                TypeList:[]
            }
        },
        mounted(){
            this.getTypeList()
        },
        methods:{
            flower(names){
                this.$router.push({
                    path:'/list',
                    query:{
                        names:names
                    }
                })
            },
            getTypeList(){
                getType().then(res=>{
                    this.TypeList =  res.data
                })
                
                }
        }
    }
</script>

<style scoped>
    p{
        margin: 1vh;
        padding-left: 1vh;
        color: rgb(217, 220, 223);
    }
    .love{
          width: 100%;
        height: 14vh;
        margin-top: 2vh;
    }
    button{
        width: 25%;
        height: 4vh;
        margin: 1.5vh 2vh;
        border-radius:8px;
        border: 0px;
        outline:none;
        color:rgb(193, 193, 194);
        background:rgb(236, 237, 238);
    }
</style>